<template>
  <div class="url-detail">
    <el-tabs>
      <el-tab-pane label="web url" :key="'webUrl'">
        <el-descriptions :labelStyle="{width:'20%'}" :contentStyle="{width: '30%'}" :column="2" border>
          <el-descriptions-item v-for="(val, key) in data" :key="key">
            <template slot="label">
              <div class="url-detail-key" :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
                {{ langData(String(key)) }}
              </div>
            </template>
            <div class="url-detail-value"> {{ val }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="profiles" :key="'profiles'">
        <div class="tableRow" ref="tableRow">
          <el-table
            :data="tableData"
            class="dataTable"
            ref="dataTable"
            size="small"
            border
            v-horizontal-scroll="{bottom:42}"
          >
            <el-table-column label="序号" type="index" align="center" fixed>
            </el-table-column>
            <el-table-column label="名称" align="center" prop="Name" fixed/>
            <el-table-column :label="langData(key)" align="center" v-for="key in names"
                             :prop="key"
                             :key="key"/>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {webUriByUrl} from "@/api/druidMonitor";
import lang from "@/utils/datasourceLanguage";
import erd from "element-resize-detector";

@Component({name: 'UrlDetail'})
export default class UrlDetail extends Vue {
  // 表格数据
  private data: any = {};
  private tableData: any = [];
  names: any = ['Parent', 'Type', 'ExecuteCount', 'ExecuteTimeMillis'];

  getData() {
    webUriByUrl(this.$route.query.url || '').then((response: any) => {
      this.data = JSON.parse(JSON.stringify(response.data));
      delete this.data.Profiles;
      this.tableData = response.data.Profiles;
    }).catch((e) => {
      console.error(e);
    });
  }

  langData(key: string) {
    return lang[key] ? lang[key][1] : key;
  }
  mounted() {
    this.onresize();
    this.getData();
  }

  $refs!: {
    dataTable: HTMLFormElement,
    tableRow: HTMLDivElement
  };

  onresize() {
    const container = this.$refs.dataTable.$el;
    erd().listenTo(container, () => {
      this.$nextTick(() => {
        if (this.$refs.tableRow) {
          this.$refs.tableRow.style.height = (this.$refs.dataTable && this.$refs.dataTable.$el.clientHeight) + 'px';
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/index.scss';

.url-detail {
  @include wh();

  ::v-deep .el-descriptions__table {
    table-layout: fixed;
  }

  &-key, &-value {
    overflow: hidden; //超出宽度部分隐藏
    text-overflow: ellipsis; //超出部分显示省略号
  }

  &-key {
    cursor: pointer;
  }

  .tableRow {
    @include wh();
    position: relative;

    .dataTable {
      position: absolute;
    }
  }

  .el-tabs {
    @include wh();

    ::v-deep .el-tabs__content {
      height: calc(100% - 55px);
      padding-bottom: 1px;

      .el-tab-pane {
        @include wh();
      }
    }
  }
}
</style>
